<template>
    <div class="lots warp">
        
        <div class="lots_type">
            <div class="table">
                <div class="tr_border">
                    <div class="td_type">
                        标的类型
                    </div>
                    <div class="td_all">
                        <div>全部</div>
                        <ul style="height: auto;">
                            <li v-for="(value,index) in lotsTypeList" :key="index" @click="getliContent(value.id)">
                                <span class="val">{{value.val}}</span>
                                <div v-show="value.id==roleId" class="li_ul" :class="leftWidth">
                                    <div>全部</div>
                                    <ul>
                                        <li v-for="(val,id) in lotsTypeValList" :key="id">
                                            <span>{{val.val}}</span>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="tr_border">
                    <div class="td_type">
                        标的所在地
                    </div>
                    <div class="td_all">
                        <div>全部</div>
                        <ul>
                            <li>北京市</li>
                        </ul>
                    </div>
                </div>
                <div class="tr_border">
                    <div class="td_type">
                        标的状态
                    </div>
                    <div class="td_all">
                        <div>全部</div>
                        <ul>
                            <li>即将开始</li>
                        </ul>
                    </div>
                </div>
                <div class="tr4">
                    <div class="td_type">
                        开拍时间
                    </div>
                    <div class="td_all">
                        <div>全部</div>
                        <ul>
                            <li>未来三天</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!-- <auctioneerCard/> -->
    </div>
</template>

<script>
// import auctioneerCard from './auctioneer/auctionCard.vue' 
export default{
    name:'lots',
    components:{
        auctioneerCard
    },
    data() {
        return {
            lotsTypeList:[
                {id:1,val:'物资'},
                {id:2,val:'废旧物资'},
                {id:3,val:'废旧物资'},
                {id:4,val:'废旧物资'},
                {id:5,val:'废旧物资'},
                {id:6,val:'废物资'},
                {id:7,val:'废旧物资'},
                {id:8,val:'废旧物资'},
                {id:9,val:'废旧资'},
                {id:10,val:'废旧物资'},
                {id:11,val:'废旧资'},
                {id:12,val:'废旧物资'},
                {id:13,val:'废旧物资'},
                {id:14,val:'废旧资'},
                {id:15,val:'废旧物资'}
            ],
            lotsTypeValList:[],
            roleId:'',
            leftWidth:''
        };
    },
    created(){
        // this.$emit('public_header', false);
    },
     methods: {
        getliContent(id){
            // console.log(id)
            this.roleId=id;

            // this.leftWidth=
        }
     },
}

</script>
<style lang="less" scoped>
.lots{
    padding: 10px 0;
    .lots_type{
        .table{
            background: #fafafa;
            border: 1px solid #e6e6e6;
            border-radius: 8px;
            font-size: 12px;
            .tr_border{
                display: flex;
                border-bottom: 1px solid #e6e6e6;
                min-height: 46px;
            }
            .td_type{
                width: 90px;
                border-right: 1px solid #e6e6e6;
                text-align: center;
                padding-top: 14px;
            }
            .td_all{
                display: flex;
                color: #3d4246;
                    align-items: center;
                div{
                    // width: 90px;
                    text-align: center;
                    cursor: pointer;
                    padding: 4px 10px;
                    margin: 4px 16px;
                    border-radius: 14px;
                    width:44px
                    
                }
                div:hover{
                    background-color: #cc0000;
                    color: #fff;
                }
                ul{
                    display: flex;
                    justify-content: space-between;
                    flex-wrap:wrap;
                    width: 982px;
                    &:after{
                        content: '';
                        flex: auto;
                    //     // width: 982px;
                        // width: 90px;
                    }
                    li{
                        // position: relative;
                        // vertical-align: top;
                        // z-index: 2;
                        width: 90px;
                        .val{
                            display: inline-block;
                            padding: 4px 10px;
                            margin: 4px 6px;
                            border-radius: 14px;
                        }
                        .val:hover{
                            background-color: #cc0000;
                            color: #fff;
                        }
                        .val:focus{
                            background-color: #cc0000;
                            color: #fff;
                        }
                        .li_ul{
                            margin-left: 0;
                            background-color: #666363;
                            position: relative;
                            top: -1px;
                            overflow: hidden;
                            width: 960px;
                            // left:-100px;
                        }
                        
                    }
                    
                }

            }
            .tr4{
                display: flex;
            }

            
        }
        
    }





}
</style>